<template>
	<view class="order">
		<view class="card" v-for="item in orderList" :key="item.orderID">
			<view class="name">{{item.matterName}}</view>
			<view class="time" v-if="item.finishTimeStr==='0001-01-01 08:00:00'">提交时间：{{item.createTimeStr}}</view>
			<view class="time" v-else>受理时间：{{item.finishTimeStr}}</view>
			<view class="title">标题：{{item.title}}</view>
			<view class="desc">描述：{{item.description}}</view>
			<view class="status">状态：
				<uni-tag inverted :text="statusObj[item.status].label" :type="statusObj[item.status].type" />
			</view>
			<view class="report" v-if="item.finishReport!==''">原因：{{item.finishReport}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		GetOrderList
	} from '@/apis/matter';
	import {
		ref
	} from 'vue';
	import {
		onMounted
	} from 'vue';

	const orderList = ref([])
	const statusObj = [{
			label: '已关闭',
			type: 'error'
		},
		{
			label: '已提交',
			type: 'primary'
		},
		{
			label: '已受理',
			type: 'warning'
		},
		{
			label: '已完成',
			type: 'success'
		}
	]

	function getData() {
		GetOrderList().then(({
			data
		}) => {
			orderList.value = data
			console.log(data);
		})
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" setup>
	.order {
		.card {
			background-color: $uni-bg-color-grey;
			padding: 30rpx;
			margin: 20rpx;
			border-radius: 10rpx;

			.name {
				font-weight: bold;
				font-size: 32rpx;
			}

			.status {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
